<script>
	export default {
		data() {
			return {
				index: ''
			}
		},
		methods: {
			navHover(index) {
				this.index = index
			},
			navOut(index) {
				this.index = ''
			}
		},
	}
</script>

<template>
	<div class="bottom">
		<div class="t_a1 b-up">
			<div class="part_one">
				<div class="partone_title">关注我们</div>
				<img class="hoverImg1" src="../assets/gzh.png" v-if="index == 1" />
				<img class="hoverImg2" src="../assets/xhs.png" v-if="index == 2" />
				<img class="hoverImg3" src="../assets/dy.png" v-if="index == 3" />
				<div class="partone_item" @mouseenter="navHover(1)" @mouseleave="navOut(1)">公众号</div>
				<div class="partone_item" @mouseenter="navHover(2)" @mouseleave="navOut(2)">小红书</div>
				<div class="partone_item" @mouseenter="navHover(3)" @mouseleave="navOut(3)">抖音</div>
			</div>
			<div class="part_two">
				<div class="parttwo_title">平台链接</div>
				<a target="_blank" href="https://m.tb.cn/h.57xyOOs"
					class="parttwo_item">淘宝店铺</a>
				<a target="_blank" href="https://m.tb.cn/h.5R6DNGe" class="parttwo_item">天猫店铺</a>
				<a target="_blank" href="https://www.tuyaedu.com" class="parttwo_item">网课平台</a>
			</div>
		</div>
		<div class="t_a1 b-down">
			<div><img src="../assets/filings.png" style="width: 16px;height: 17px;"/>京公网安备 11011402014043号 </div>
			<div>Copyright © 北京美胜教育咨询有限公司京ICP备2022006197号-3 </div>
		</div>
	</div>
</template>

<style scoped lang="scss">
	.bottom {
		width: 100%;
		background-color: #090705;
		padding: 22px 0;
		color: white;

		.b-up {
			padding-bottom: 10px;
			border-bottom: 1px dashed #ffffff;

			.part_one,
			.part_two {
				display: flex;
				font-size: 16px;
				margin-bottom: 20px;
				position: relative;

				.partone_title,
				.parttwo_title {
					margin-right: 30px;
				}

				.partone_item {
					margin-right: 80px;
					cursor: pointer;
				}

				.parttwo_item {
					margin-right: 80px;
					cursor: pointer;
				}

				.hoverImg1 {
					width: 100px;
					height: 100px;
					position: absolute;
					left: 70px;
					top: -100px;
				}

				.hoverImg2 {
					width: 100px;
					height: 100px;
					position: absolute;
					left: 200px;
					top: -100px;
				}

				.hoverImg3 {
					width: 100px;
					height: 100px;
					position: absolute;
					left: 320px;
					top: -100px;
				}
			}
		}

		.b-down {
			height: 80px;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}
</style>